<template>
  <div class="setting_setting-center-authentication-information">
    <div class="top-content">
      <div class="modal-info">
        <div class="header">
          <h3>公司信息</h3>
          <label v-if="companyCheck" @click="companyCheck = false">修改</label>
          <label v-else @click="companySubmit()">保存</label>
        </div>
        <div class="modal-content">
          <el-form ref="companyForm" :model="dataInfo" :rules="rules" label-width="6rem">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="公司名称：" props="name">
                  <label v-if="companyCheck">上海蜂网电子商务</label>
                  <el-input v-else v-model="dataInfo.name" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="注册地址：" props="name">
                  <label v-if="companyCheck">上海蜂网电子商务</label>
                  <el-input v-else v-model="dataInfo.name" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="信用证代码：" props="name">
                  <label v-if="companyCheck">上海蜂网电子商务</label>
                  <el-input v-else v-model="dataInfo.name" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="有效期：" props="name">
                  <label v-if="companyCheck">上海蜂网电子商务</label>
                  <el-input v-else v-model="dataInfo.name" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="营业执照：" props="name">
                  <label v-if="companyCheck">上海蜂网电子商务</label>
                  <upload ref="uploadImg" :file-list="fileList" :limit="1" :file-filter="filterImgType" :name-show="false" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="公司名称：" props="name">
                  <label v-if="companyCheck">上海蜂网电子商务</label>
                  <el-input v-else v-model="dataInfo.name" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="modal-info">
        <div class="header">
          <h3>开户行信息</h3>
          <label>修改</label>
        </div>
        <div class="modal-content">
          <el-form ref="blankForm" :model="dataInfo" :rules="rules" label-width="6rem" />
        </div>
      </div>
    </div>
    <div class="modal-info">
      <div class="header">
        <h3>法人信息</h3>
        <label>修改</label>
      </div>
      <div class="modal-content">
        <el-form ref="peopleForm" :model="dataInfo" :rules="rules" label-width="6rem" />
      </div>
    </div>
  </div>
</template>

<script>
import upload from '@/components/upload'
export default {
  components: {
    upload
  },
  data() {
    return {
      rules: {},
      fileList: [],
      companyCheck: true,
      filterImgType: ['jpg', 'jpeg', 'png', 'icon', 'gif', 'bmp', 'JPG', 'JPEG', 'PNG', 'ICON', 'GIF', 'BMP']
    }
  },
  methods: {
    companySubmit() {
      this.companyCheck = true
      console.log('111')
    }
  }
}
</script>

<style lang="scss">
.setting_setting-center-authentication-information {
  .top-content {
    display: flex;
    align-items: center;
    .modal-info {
      background: #fff;
      flex-grow: 1;
      padding: 30px;
      width: 40%;
      height: 300px;
      .header {
        display: flex;
        justify-content: space-between;
        color:#507BC7;
        >h3 {
          margin: 0;
        }
      }
    }
    .modal-info:first-child {
      margin-right: 30px;
    }
  }
}
</style>
